<template>
  <div class="table-demo-container">
    <SearchTabTime :tabList="tabList" :curTab="curTab" @onChange="changeTab" :tag="'23/01/01 更新'"></SearchTabTime>
    <div class="zs-card table-demo-content">
      <el-table :data="tableData" class="cur-table" :stripe="stripe">
        <el-table-column label="序号" width="60" :align="'center'">
          <template #default="scope">
            {{ scope.$index + 1 + curPageSize * ( currentPage - 1 ) }}
          </template>
        </el-table-column>
        <el-table-column prop="a" label="项目" :align="'left'" width="260"/>
        <el-table-column prop="b" label="业态" :align="'center'"  width="100"/>
        <el-table-column prop="c" label="阶段" :align="'center'" width="100"/>
        <el-table-column prop="d" label="集团" :align="'center'" width="100"/>
        <el-table-column prop="e" label="城市" :align="'center'" width="100"/>
        <el-table-column prop="f" label="销售额" :align="'right'"/>
        <el-table-column prop="g" label="客流量" :align="'right'"/>
        <el-table-column prop="h" label="出租率" :align="'right'"/>
        <el-table-column prop="" label="操作" :align="'center'">
          <template #default="scope">
            <el-button class="zs-link" link size="small" @click="editRow(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="zs-pagination zs-space-top-sm table-demo-pagination">
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
          :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </div>
    </div>
  </div>

</template>
<script setup>
import SearchTabTime from '@/DbComponents/searchTabTime'
// import { queryProjectMappingListApi, saveUpdateProjectMappingApi } from '@/api/ProjectMapping'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
let store = useStore()
const stripe = ref(true)

const tabList = ref([{label: '商业', value: '1'}, {label: '办公', value: '2'}, {label: '产业', value: '3'}, {label: '酒寓', value: '4'}])
const curTab = ref('1')
const changeTab = (data) => {
  curTab.value = data.data
}
// 分页
const curPageSizes = ref(store.state.uiPageSizes)
const curPageSize = ref(store.state.uiPageSizeDefault)
const currentPage = ref(1)
let total = ref(0)

// 字典数据
// const dictObj = store.getters.getDictObj(["BI_PROJECT_STAGE", "BI_PROJECT_FORMAT"]);
// const stageList = ref(dictObj.BI_PROJECT_STAGE)
// const formatList = ref(dictObj.BI_PROJECT_FORMAT)
// const showList = ref([{label: '展示', value: '1'}, {label: '隐藏', value: '0'}])

// 筛选项
// const curStage = ref('')
// const curFormat = ref('')
// const curProjectName = ref('')
// const curShow = ref('1')

// let selectItem = ref({})
const tableData = ref([
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
{a: '北京木樨园合生汇广场商场', b: '商业', c: '筹备', d: '合生', e: '北京', f: '110260.62', g: '127743', h: '96%'},
])

// const getTableData = () => {
  // let data = {
  //   biStage: curStage.value,
  //   biBuType: curFormat.value,
  //   biProjectName: curProjectName.value,
  //   isShow: curShow.value,
  //   pageSize: curPageSize.value,
  //   pageNo: currentPage.value
  // }
  // queryProjectMappingListApi(data).then((res) => {
  //   if (res.data.code == 200) {
  //     total.value = Number(res.data.data.totalCount)
  //     tableData.value = res.data.data.childList
  //     tableData.value.map(row => {
  //       const stageIndex = stageList.value.findIndex(item => {return item.dictValue == row.biStage})
  //       row.biStageLabel = stageIndex > -1 ? stageList.value[stageIndex].dictLabel : '-'
  //       const formatIndex = formatList.value.findIndex(item => {return item.dictValue == row.biBuType})
  //       row.biBuTypeLabel = formatIndex > -1 ? formatList.value[formatIndex].dictLabel : '-'
  //     })
  //   }
  // })
// }
// getTableData()
// const formatterData = (row, column, cellValue, index) => {
//   console.log(row)
//   console.log(column)
//   console.log(index)
//   return cellValue ? cellValue : '-'
// }
const handleSizeChange = (val) => {
  currentPage.value = 1
  curPageSize.value = val
  // getTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  // getTableData()
}

// const closeFormDrawer = (data) => {
//   isShowAddDrawer.value = data.isShow
//   getTableData()
// }

// 新增
// const addRow = () => {
//   selectItem.value = {}
//   isShowAddDrawer.value = true
// }
// // 编辑
const editRow = (row) => {
  // console.log(row)
  // selectItem.value = row
  // isShowAddDrawer.value = true
  router.push({
    path: '/page/routeController/index',
    query: {
      rid: 'dash_board_demo_page',
      rTitle: '项目详情',
      ruleName: row.ruleName,
      id: row.id
    }
  })
}

// const deleteRow = (row) => {
//   selectItem.value = row
//   isShowDeleteDrawer.value = true
// }
// const closeDeleteDrawer = (data) => {
//   isShowDeleteDrawer.value = data.isShow
//   if (data.isDelete) {
//     // 执行删除操作
//     saveUpdateProjectMappingApi({ id: selectItem.value.id, delFlag: 1 }).then((res) => {
//         if (res.data.code == 200) {
//             getTableData()
//         }
//     })
//   }
// }

</script>


<style scoped lang="scss">
.table-demo-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 58px);
}

.demo-search-container {
  display: flex;
  justify-content: space-between;
}

.table-demo-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.table-demo-pagination {
  flex-grow: 1;
  align-items: flex-end;
}

.cur-table {
  max-height: calc(100vh - 262px);
}

</style>
